본문으로 건너뛰기

컴포넌트 함수로 JSX 반환

React에서 컴포넌트는 UI를 구성하는 기본 단위입니다. 컴포넌트는 함수나 클래스로 정의할 수 있으며, 여기서는 함수형 컴포넌트에 집중하겠습니다. 함수형 컴포넌트는 단순하고 이해하기 쉬우며, 최신 React에서는 함수형 컴포넌트와 훅(Hook)을 권장하고 있습니다. 이번 주제에서는 함수형 컴포넌트에서 JSX를 반환하는 방법을 자세히 살펴보겠습니다.

함수형 컴포넌트 정의하기​

함수형 컴포넌트는 JavaScript 함수입니다. 이 함수는 JSX를 반환하며, 이 JSX가 실제 화면에 렌더링됩니다. 간단한 예시로 시작해 보겠습니다.

import React from 'react';

function Greeting() {
  return <h1>Hello, React!</h1>;
}

export default Greeting;

위 예시에서 Greeting 함수는 JSX <h1>Hello, React!</h1>를 반환합니다. 이 JSX는 React가 이해할 수 있는 JavaScript 객체로 변환되어 DOM에 렌더링됩니다.

컴포넌트의 Props 사용하기​

컴포넌트는 외부로부터 전달받은 데이터를 사용할 수 있습니다. 이러한 데이터를 Props라고 부릅니다. 함수형 컴포넌트에서는 매개변수로 Props를 받아 사용할 수 있습니다.

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

이제 Greeting 컴포넌트를 사용할 때 name이라는 Prop을 전달할 수 있습니다.

import React from 'react';
import Greeting from './Greeting';

function App() {
  return <Greeting name="React" />;
}

export default App;

JSX에서 표현식 사용하기​

JSX 내에서는 JavaScript 표현식을 사용할 수 있습니다. 이를 통해 동적인 콘텐츠를 렌더링할 수 있습니다.

import React from 'react';

function Greeting(props) {
  const greetingMessage = `Hello, ${props.name}!`;
  return <h1>{greetingMessage}</h1>;
}

export default Greeting;

이 예제에서 greetingMessage 변수는 props.name을 포함한 문자열을 생성하고, JSX 내에서 중괄호 {}를 사용하여 이를 출력합니다.

조건부 렌더링​

JSX 내에서 조건부 렌더링을 할 수 있습니다. if 문이나 삼항 연산자 ? :를 사용하여 조건에 따라 다른 JSX를 반환할 수 있습니다.

import React from 'react';

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back, {props.name}!</h1>;
  } else {
    return <h1>Please sign in.</h1>;
  }
}

export default Greeting;

또는 삼항 연산자를 사용할 수도 있습니다.

import React from 'react';

function Greeting(props) {
  return (
    <h1>
      {props.isLoggedIn ? `Welcome back, ${props.name}!` : 'Please sign in.'}
    </h1>
  );
}

export default Greeting;

배열 렌더링​

여러 개의 요소를 렌더링해야 할 경우 배열을 사용합니다. map 함수를 사용하여 배열을 JSX 요소로 변환할 수 있습니다.

import React from 'react';

function ItemList(props) {
  return (
    <ul>
      {props.items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default ItemList;

이 예제에서 props.items 배열의 각 요소는 <li> 태그로 감싸져서 렌더링됩니다. key 속성은 React가 각 요소를 고유하게 식별할 수 있도록 돕습니다.

더 알아보기​

  • Props와 State: 컴포넌트 간 데이터 전달 및 상태 관리 방법
  • 조건부 렌더링: 다양한 조건부 렌더링 기법과 사용 사례
  • 리스트 렌더링: map 함수와 key 속성의 중요성

내용 요약과 다음 주제​

이번 주제에서는 함수형 컴포넌트에서 JSX를 반환하는 방법에 대해 알아보았습니다. 함수형 컴포넌트는 단순한 구조와 Props를 통해 데이터와 상호작용하며, 조건부 렌더링과 리스트 렌더링을 통해 동적인 UI를 쉽게 구현할 수 있습니다. 다음 주제인 컴포넌트 내부의 inner 컴포넌트 선언에서는 컴포넌트 내부에 또 다른 컴포넌트를 선언하여 코드를 더욱 구조화하고 재사용성을 높이는 방법에 대해 다루겠습니다.